(function(Manager){
	// Dependency
	var Base = ideon.module("base");
	console.log(Base);
	var actions = ideon.actions;
	// Models
	//Manager.Model.User = Base.Model.User.extend({});
	//Manager.Model.Role = Backbone.Model.extend({});
	Manager.Model.GoogleUser = Backbone.Model.extend({
		addRole: function(role) {
			var roles = this.get("roles");
			roles[role] = true;
			this.trigger("changeRole");
		},
		
		removeRole: function(role) {
			var roles = this.get("roles");
			roles[role] = false;
			this.trigger("changeRole");
		},
	});
	
	// Collection
	/*Manager.Collection.Users = Base.Collection.Paginated.extend({
		model: 		Manager.Model.User,
		url: 		Actions.users,
	});*/
	
	/*Manager.Collection.Roles = Backbone.Collection.extend({
		model: 		Manager.Model.Rol,
		url: 		Actions.roles,
	});*/
	
	Manager.Collection.GoogleUsers = Backbone.Collection.extend({
		model: Manager.Model.GoogleUser,
		url: Actions.googleUsers,
	});
	
	// View
	Manager.View.UserList = Backbone.View.extend({
		tagName: "div",
		id: "users",
		template: _.template($("#user-list-template").html()),
		
		events: {
			"click button.add":		"add",
		},
		
		initialize: function(){
			this.roles = new Manager.Collection.Roles();
			this.roles.fetch();
			this.collection.bind("add", this.render, this);
			this.collection.bind("reset", this.render, this);
		},

		render: function() {
			$(this.el).html(this.template({}));
			
			var $list = this.$("ul.list");
			$list.empty();
			var $pagination = this.$("div.pagination");
			$pagination.empty();
			
			var that = this;
			this.collection.each(function(user){
					var view= new Manager.View.UserItem({
								collection: that.collection, 
								model: user,
								roles: that.roles
					});
					$list.append(view.render().el);
			});
				
			var pagination_template =  _.template($("#pagination-template").html());               
			$pagination.append(pagination_template(this.collection.pageInfo()));
				
			return this;
		},
		
		add: function() {
			var editor = new Bluehat.View.FocusEditor({collection: this.collection});	
			var $newFocus = this.$("#new-focus");
			$newFocus.empty();
			$($newFocus.append(editor.render().el));
		},
	});
	
	Manager.View.UserItem = Base.View.Item.extend({
		className: "user",
		template: _.template($("#user-item-template").html()),
		
		events: {
			"click button.roles":			"showRoles",
			"click button.add":				"addUser",
			"click button.delete":			"deleteUser",
			"click input.access":			"changeAccess",
			"click button[name=admin]":		"management",
		},
		
		initialize: function() {
			
			//this.roles = this.options.roles;
			
			this.model.bind("change", this.render, this);
			//this.roles.bind("reset", this.render, this);
		},
		
		render: function() {
			$(this.el).html(this.template({
				data: this.model,
				//roles: _.pluck(this.roles.toJSON(), "role")
			}));
			return this;
		},
		
		management: function() {
			console.log("Management");
			var editorView = new Manager.View.UsersManagementModal({
				model: this.model,
				collection: this.collection
			});
			
			editorView.render();
		},
		
		change: function() {
			console.log("The model has changed");
			this.render();
		},
		
		addUser: function() {
			console.log("UserItem -> addUser");
			this.model.set({access: true});
			this.model.save();
		},
		
		deleteUser: function() {
			console.log("UserItem -> deleteUser");
			this.model.destroy();
		},
		
		changeAccess: function() {
			console.log("UserItem -> changeAccess");
			this.model.set({access: !this.model.get("access")});
			this.model.save();
		},
		
		remove: function() {
			this.render();
			//$(this.el).remove();
		},
		
		showRoles: function() {
			console.log("ShowRoles");
			$(this.el).empty();
			this.render();
			var managementView = new Manager.View.ManagementRoles({
				model: this.model,
				roles: this.roles,
			});
			console.log(managementView.render().el);
			$(this.el).append(managementView.render().el);
		},
	});
	
	// Render a modal management view for users administration.
	Manager.View.UsersManagementModal = Base.View.ModalEditor.extend({
		events: function() {
			return _.extend({
				"click	.add":			"addRole",
				"click	.remove":		"removeRole"
			}, Base.View.ModalEditor.prototype.events);
		},
		
		initialize: function() {
			Base.View.ModalEditor.prototype.initialize.call(this);
			this.model.bind("changeRole", this.renderContain, this);
			this.roles = _.clone(this.model.get("roles"));
		},
		
		template: _.template($("#user-management-template").html()),
		
		save: function() {
			console.log("UsersManagementModal -> save");
			this.model.save();
			this.close();
		},
		
		cancel: function() {
			console.log("This canceling");
			console.log(this.roles);
			this.model.set({"roles": this.roles},{silent: true});
			this.close();
		},
		
		addRole: function(e) {
			console.log("Adding role");
			var self = this;
			this.$("select[name=allroles] option:selected").each(function(i, role){
				self.model.addRole(role.value);
			});
		},
		
		removeRole: function(e) {
			console.log("Removing role");
			var self = this;
			this.$("select[name=userroles] option:selected").each(function(i, role){
				self.model.removeRole(role.value);
			});
		},
		
	});
	
	/*Manager.View.ManagementRoles = Backbone.View.extend({
		tagName: "div",
		className: "management_roles",
		template: _.template($("#management-roles-template").html()),
		
		events: {
			"click .close":			"close"
		},
		
		initialize: function() {
			this.roles = this.options.roles;
			this.model.bind("addRole", this.addRole, this);
			this.model.bind("removeRole", this.removeRole, this);
		},
		
		render: function() {
			$(this.el).html(this.template({}));
			var that = this;
			this.roles.each(function(role) {
	
				var hasRole = _.indexOf(that.model.get("roles"), role.get("role")) >= 0 ? true : false;
				var roleItem = new Manager.View.RoleItem({
					user: that.model,
					model: role,
					hasRole: hasRole, // TODO
				});
				$("ul", that.el).append(roleItem.render().el);
			});
			return this;
		},
		
		addRole: function(role) {
			console.log("Adding: " + role);
			var roles = this.model.get("roles");
			if(_.indexOf(roles, role.get("role")) < 0) {
				roles.push(role.get("role"));
				this.model.save({roles: roles});
			}
			this.render();
		},
		
		removeRole: function(role) {
			console.log("Removing: " + role);
			var roles = _.without(this.model.get("roles"), role.get("role"));
			this.model.save({roles : roles}); 
			
			this.render();
		},
		
		close: function() {
			$(this.el).remove()
		},
	});*/
	
	/*Manager.View.RoleItem = Backbone.View.extend({
		template: _.template($("#role-item-template").html()),
		
		events: {
			"click input.add":				"addRole",
			"click input.remove":			"removeRole",
		},
		
		initialize: function() {
			this.user = this.options.user;
			this.hasRole = this.options.hasRole;
		},
		
		render: function() {
			$(this.el).html(this.template({
				role: this.model,
				hasRole: this.hasRole,
			}));
			return this;
		},
		
		addRole: function() {
			console.log("Add role");
			this.user.trigger("addRole", this.model);
		},
		
		removeRole: function() {
			console.log("Remove role");
			this.user.trigger("removeRole", this.model);
		},
	});*/
	
	Manager.View.GoogleUserList = Backbone.View.extend({
		tagName: "ul",
		
		initialize: function() {
			/*this.roles = new Manager.Collection.Roles();
			this.roles.fetch();*/
			
			this.collection.bind("reset", this.render, this);
		},
		
		render: function() {
			var that = this;
			this.collection.each(function(googleUser){
				var userItem = new Manager.View.UserItem({ model: googleUser});
				$(that.el).append(userItem.render().el);
			});
			return this;
		},
	});
	
	Manager.View.GoogleUserItem = Backbone.View.extend({
		tagName: "li",
		
		initialize: function() {
			this.model.bind("change", this.render, this);
		},
		
		render: function() {
			$(this.el).html(this.model.get("firstName") + " " + this.model.get("lastName") );
			return this;
		}
	});

	Manager.View.App = Base.View.App.extend({});
	
	// Router
	Manager.Router.App = Backbone.Router.extend({
		routes: {
			"":						"index",
			"/roles":				"roles",
			"users":				"users",
		},
		
		initialize: function() {
			this.appView = new Manager.View.App();
		},
		
		index: function() {
			//var users = new Manager.Collection.Users([], {paginated: true});
			var users = new Manager.Collection.GoogleUsers();
			
			users.fetch();
			var userListView = new Manager.View.GoogleUserList({collection: users});
			$(this.appView.el).html(userListView.render().el);
		},
		
		roles: function() {
		},
		
		users: function() {
			var usersCollection = new Manager.Collection.GoogleUsers();
			var googleListView = new Manager.View.GoogleUserList({collection: usersCollection});
			usersCollection.fetch();
			$(this.appView.el).html(googleListView.render().el);
		},
	});
})(ideon.module("manager"));